<template>
    <div class="app-container">
        <div class="wx-user-box">
            <div class="flex-between">
                <div></div>
                <el-button type="primary" @click="addNews">添加新闻</el-button>
            </div>
            <div class="flex-start mr-t-10">
                <div class="type-list">
                    <div class="flex-between type-item pointer" :class="[params.classify_id=='-1'?'actives':'']">
                        <div>全部</div>
                    </div>
                    <div class="flex-between type-item pointer" v-for="(item,i) in types" :class="[params.classify_id==item.id?'actives':'']" :key="i">
                        <div>{{item.name}}</div>
                        <div>
                            <i class="el-icon-edit-outline" @click="editClass(item)" style="color:#1890ff;"></i>
                            <i class="el-icon-delete-solid" @click="delClass(item)" style="color:#ff4949;"></i>
                        </div>
                    </div>
                    <div class="add-btn flex-center" @click="addClassfy">
                        <el-button style="width:90%;" type="primary">添加分类</el-button>
                    </div>
                </div>
                <el-table :data="list" style="width: 100%;" border>
                    <el-table-column align="center" label="标题">
                        <div slot-scope="scope">
                            {{ scope.row.title }}
                        </div>
                    </el-table-column>
                    <el-table-column align="center" label="简介">
                        <div slot-scope="scope">
                            {{ scope.row.Introduction }}
                        </div>
                    </el-table-column>
                    <el-table-column align="center" label="是否推荐">
                        <div slot-scope="scope">
                            {{ scope.row.recommend==1?'是':'否' }}
                        </div>
                    </el-table-column>
                    <el-table-column align="center" label="时间">
                        <div slot-scope="scope">
                            {{ scope.row.createTime }}
                        </div>
                    </el-table-column>
                    <el-table-column label="操作">
                        <div slot-scope="scope">
                            <el-button size="small" @click="handleEdit(scope.row)" icon="el-icon-edit">编辑</el-button>
                            <el-button type="danger" size="small" @click="handleDelete(scope.row)" icon="el-icon-delete">删除</el-button>
                        </div>
                    </el-table-column>
                </el-table>
            </div>
        </div>

        <el-dialog :visible.sync="dialogVisible" width="400px" :title="form.id?  '修改分类' : '添加分类'">
            <el-form :model="form" label-width="80px" label-position="left">
                <el-form-item label="分类名称">
                    <el-input style="width:260px;" v-model="form.name" placeholder="请输入分类名称" /></el-form-item>
                <el-form-item label="分类排序">
                    <el-input style="width:260px;" v-model="form.sorting" placeholder="请输入分类排序" />
                </el-form-item>
            </el-form>
            <div style="text-align:right;">
                <el-button type="danger" @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="confirmRole">确定</el-button>
            </div>
        </el-dialog>

        <el-dialog :visible.sync="dialogVisible1" width="1130px" :title="form.id?  '修改新闻' : '添加新闻'">
            <div class="flex-start">
                <el-form :model="newsData" label-width="80px" ref="newsData" :rules="rules">
                    <el-form-item label="分类">
                        <el-select style="width:260px;" v-model="newsData.classify_id" clearable placeholder="请选择">
                            <el-option v-for="item in types" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="title" label="标题">
                        <el-input style="width:260px;" v-model="newsData.title" placeholder="请输入标题" /></el-form-item>
                    <el-form-item prop="Introduction" label="简介">
                        <el-input type="textarea" style="width:260px;" v-model="newsData.Introduction" placeholder="请输入简介" /></el-form-item>

                    <el-form-item label="封面图" prop="file_url">
                        <div>
                            <el-button class="mr-r-10" size="mini" type="primary" @click="upFiles" id="file_add">选择图片
                            </el-button>
                            <img :src="newsData.cover" style="max-width:100px;" />
                        </div>
                    </el-form-item>
                    <el-form-item label="是否推荐">
                        <el-switch v-model="newsData.recommend" active-value="1" inactive-value="0" active-text="推荐" inactive-text="不推荐">
                        </el-switch>
                    </el-form-item>
                    <el-form-item prop="sorting" label="排序">
                        <el-input style="width:260px;" v-model="newsData.sorting" placeholder="请输入排序" />
                    </el-form-item>
                </el-form>
                <div style="margin-left:30px;">
                    <!--<h2 class="msgs">公告内容</h2>-->
                    <div :id="UeditorId"></div>
                </div>
            </div>
            <div style="text-align:center;margin-top:10px;border-top:1px solid #eee;padding-top:10px;">
                <el-button style="width:120px;" type="danger" @click="dialogVisible1 = false">取消</el-button>
                <el-button style="width:120px;" type="primary" @click="saveNews('newsData')">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import path from 'path';
import { websiteclassifySave, websiteclassifyQuery, websiteclassifyDel, websitenewsQuery, websitenewsDel, websitenewsSave } from '@/api/guanwangs';

export default {
    data() {
        return {
            types: [],

            form: {
                sorting: '',
                name: '',
                id: '',
            },
            list: [],
            dialogVisible: false,
            dialogVisible1: false,
            newsData: {
                id: '',
                title: '',
                Introduction: '',
                cover: '',
                content: '',
                sorting: '1',
                classify_id: '',
            },
            UeditorId: "Ueditor1",
            params: {
                classify_id: '',
                pageSize: 10,
                pageNumber: 1,
            },
            rules: {
                title: [
                    {
                        required: true,
                        message: "请输入标题",
                        trigger: "change",
                    },
                ],
                Introduction: [
                    {
                        required: true,
                        message: "请输入简介",
                        trigger: "change",
                    },
                ],
                sorting: [
                    {
                        required: true,
                        message: "请输入排序",
                        trigger: "change",
                    },
                ],

            },
            ue: '',
        };
    },

    created() {
        // this.websiteclassifyQuery();
        // this.getList();
    },
    methods: {
        getList() {
            websitenewsQuery(this.params).then(res => {
                if (res.state) {
                    this.list = res.data.list;
                }
            })
        },
        saveNews: function(formName) {
            let datas = {}
            for (let key in this.newsData) {
                datas['news.' + key] = this.newsData[key]
            }
            console.log(this.newsData);
            this.getContent();
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    websitenewsSave(datas).then((res) => {
                        if (res.state) {
                            this.$message({
                                message: res.msg,
                                type: "success",
                            });
                            this.centerDialogVisible1 = false;
                            this.getData();
                        } else {
                            this.$message.error(res.msg);
                        }
                    });
                }
            });
        },
        upFiles: function() {
            this.hhFile.qnUpload({
                elm: "#file_add",
                // filter: "pdf",
                prefix: "",
                success: (img, info) => {
                    this.newsData.cover = 'https://cdn.gexinit.com/' + info.name;
                    console.log(this.newsData.cover)
                    this.$forceUpdate();
                }
            });
        },
        handleEdit(item) {
            this.newsData = item;
            this.newsData.classify_id = Number(item.classify_id);
            // this.UeditorId = "Ueditor1" + new Date().getTime();
            this.madeUeditor();
            this.dialogVisible1 = true;
        },
        //添加编辑新闻
        addNews() {
            // this.UeditorId = "Ueditor1" + new Date().getTime();
            this.madeUeditor();
            this.dialogVisible1 = true;
        },
        madeUeditor: function(content = this.newsData.content || '') {
            this.UeditorId = "Ueditor1" + new Date().getTime();
            console.log(content)
            this.$nextTick(() => {
                if (this.ue) {
                    this.ue.setHide();
                }
                this.ue = UE.getEditor(this.UeditorId, {
                    hhConfig: {
                        hh: this
                    },
                    autoHeightEnabled: false,
                    initialFrameHeight: 460,
                    initialContent: content,
                    initialFrameWidth: 700,
                    zIndex: 9999,
                });
            });
        },
        getContent() {
            console.log(' UE.getEditor(this.UeditorId).getContent()', UE.getEditor(this.UeditorId).getContent())
            this.newsData.content = UE.getEditor(this.UeditorId).getContent();
        },
        setContentss(data) {
            this.ue.setContent(data);
        },
        websiteclassifyQuery() {
            websiteclassifyQuery({
                pageSize: 9999,
                pageNumber: 1
            }).then(res => {
                if (res.state) {
                    this.types = res.data.list;
                }
            })
        },
        addClassfy() {
            this.dialogVisible = true;
        },
        editClass(item) {
            this.form.name = item.name;
            this.form.sorting = item.sorting;
            this.form.id = item.id;
            this.dialogVisible = true;

        },
        delClass(item) {
            this.$confirm('删除该分类，会把该分类下的新闻删除掉，是否确定删除?', '确认删除该分类吗?', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(res => {
                console.log(res)
                websiteclassifyDel({ id: item.id }).then(res => {
                    if (res.state) {
                        this.websiteclassifyQuery();
                        this.$message({
                            type: 'success',
                            message: res.data.msg
                        });
                    } else {
                        this.$message.error(res.data.msg);
                    }
                })
            }).catch(_ => { });
        },
        // 获取菜单列表
        getData() {

        },
        // 保存分类
        confirmRole() {
            if (!this.form.name) {
                this.$message.error('请输入分类名称');
                return;
            }
            if (!this.form.sorting) {
                this.$message.error('请输入分类排序');
                return;
            }
            let datas = {};
            datas['classify.name'] = this.form.name;
            datas['classify.sorting'] = this.form.sorting;
            datas['classify.id'] = this.form.id;
            websiteclassifySave(datas).then(res => {
                if (res.state) {
                    this.dialogVisible = false;
                    this.form = {
                        sorting: '',
                        name: '',
                        id: '',
                    }
                    this.websiteclassifyQuery();
                    this.$message({
                        type: 'success',
                        message: res.data.msg
                    });
                } else {
                    this.$message.error(res.data.msg);
                }
            })
        },
        handleDelete(item) {
            this.$confirm('确认删除该新闻?', '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(res => {
                websitenewsDel({ id: item.id }).then(res => {
                    if (res.state) {
                        this.getList();
                        this.$message({
                            type: 'success',
                            message: res.data.msg
                        });
                    } else {
                        this.$message.error(res.data.msg);
                    }
                })
            }).catch(_ => { });
        },

    }
};
</script>

<style lang="scss" scoped>
.mr-t-10 {
    margin-top: 10px;
}

.flex-start {
    display: flex;
}

.flex-center {
    display: flex;
    align-content: center;
    justify-content: center;
}

.type-list {
    width: 200px;
    border-bottom: 1px solid #eee;
    margin-right: 10px;
    border: 1px solid #eee;
    max-height: 600px;
    overflow: auto;
}

.type-item {
    padding: 10px;
}

.add-btn {
    margin: 20px auto;
    border-top: 1px solid #eee!important;
    padding-top: 20px;
}

.actives {
    background: #d1d4fe;
    color: #6672fb;
    border-bottom: none;
}
</style>